<template>
  <a-row :gutter="4">
    <a-col :md="8">
      <a-card>
        <a-row>
          <a-col :md="8"><a-avatar shape="square" :size="100" icon="user" /></a-col>
          <a-col :md="16">
            <div>机械加工中心</div>
            <div>张三</div>
            <div>焊接岗</div>
            <div>白班</div>
            <div>2023-10-10 11:11:11</div>
          </a-col>
        </a-row>
      </a-card>
      <a-card title="生产任务">
        <a-list>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta>
              <div slot="title">花键轴</div>
              <div slot="description">工单号：P-20231010-0001</div>
              <div slot="description">下游工序：车加工</div>
            </a-list-item-meta>
            <div>0/100</div>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
    <a-col :md="16">
      <a-card>
        <a-descriptions title="工单号：P-20231010-0001">
          <a-descriptions-item label="物料">
            花键轴
          </a-descriptions-item>
          <a-descriptions-item label="工序类型">
            质检工序
          </a-descriptions-item>
          <a-descriptions-item label="下游工序">
            车加工
          </a-descriptions-item>
          <a-descriptions-item label="进度">
            1/100
          </a-descriptions-item>
          <a-descriptions-item label="不合格数">
            50
          </a-descriptions-item>
          <a-descriptions-item label="合格率">
            50%
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card>
        <a-tabs>
          <a-tab-pane key="作业指导书" tab="作业指导书">
            <iframe style="width: 100%;height: 500px;"
              src="https://www.mem.gov.cn/gk/tzgg/tz/202010/W020201102332723879957.pdf"></iframe>
          </a-tab-pane>
          <a-tab-pane key="关键件投料" tab="关键件投料">
            <a-row :gutter="4">
              <a-col :md="12">
                <a-card bordered title="操作">
                  <a-form layout="vertical">
                    <a-form-item label="物料条码">
                      <a-input placeholder="请扫描" />
                    </a-form-item>
                    <a-form-item label="物料">
                      <a-input placeholder="请选择" />
                    </a-form-item>
                    <a-form-item label="批次">
                      <a-input placeholder="批次" />
                    </a-form-item>
                    <a-form-item label="数量">
                      <a-input placeholder="数量" />
                    </a-form-item>
                    <a-form-item label="扫码自动提交">
                      <a-switch default-checked />
                    </a-form-item>
                    <a-form-item>
                      <a-button type="primary" block>
                        提交
                      </a-button>
                    </a-form-item>
                  </a-form>
                </a-card>
              </a-col>
              <a-col :md="12">
                <a-card bordered title="记录">
                  <a-timeline>
                    <a-timeline-item>2015-09-01 11:11:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:12:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:13:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:14:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:15:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:16:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                  </a-timeline>

                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="装箱报工" tab="装箱报工">

            <a-row :gutter="4">
              <a-col :md="12">
                <a-card bordered title="操作">
                  <a-form layout="vertical">
                    <a-form-item label="周转箱码">
                      <a-input placeholder="请扫描" />
                    </a-form-item>
                    <a-form-item label="数量">
                      <a-input placeholder="数量" />
                    </a-form-item>
                    <a-form-item label="扫码自动提交">
                      <a-switch default-checked />
                    </a-form-item>
                    <a-form-item>
                      <a-button type="primary" block>
                        提交
                      </a-button>
                    </a-form-item>
                  </a-form>
                </a-card>
              </a-col>
              <a-col :md="12">
                <a-card bordered title="记录">
                  <a-timeline>
                    <a-timeline-item>2015-09-01 11:11:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:12:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:13:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:14:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:15:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:16:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                  </a-timeline>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="不合格品处理" tab="不合格品处理">

            <a-row :gutter="4">
              <a-col :md="12">
                <a-card bordered title="操作">
                  <a-form layout="vertical">
                    <a-form-item label="类型">
                      <a-radio-group default-value="a" button-style="solid">
                        <a-radio-button value="a">
                          可疑品
                        </a-radio-button>
                        <a-radio-button value="b">
                          不合格品
                        </a-radio-button>
                        <a-radio-button value="c">
                          废品
                        </a-radio-button>
                        <a-radio-button value="d">
                          废料
                        </a-radio-button>
                      </a-radio-group>
                    </a-form-item>
                    <a-form-item label="周转箱码">
                      <a-input placeholder="请扫描" />
                    </a-form-item>
                    <a-form-item label="物料">
                      <a-input placeholder="物料" />
                    </a-form-item>
                    <a-form-item label="数量">
                      <a-input placeholder="数量" />
                    </a-form-item>
                    <a-form-item label="扫码自动提交">
                      <a-switch default-checked />
                    </a-form-item>
                    <a-form-item>
                      <a-button type="primary" block>
                        提交
                      </a-button>
                    </a-form-item>
                  </a-form>
                </a-card>
              </a-col>
              <a-col :md="12">
                <a-card bordered title="记录">
                  <a-timeline>
                    <a-timeline-item>2015-09-01 11:11:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:12:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:13:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:14:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:15:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:16:11 【张三】<br> 物料/批次/数量<br><a href="#">详情</a></a-timeline-item>
                  </a-timeline>

                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="异常处理" tab="异常处理">

            <a-row :gutter="4">
              <a-col :md="12">
                <a-card bordered title="操作">
                  <a-list>
                    <a-list-item> <a-button type="primary" block>工艺呼叫</a-button></a-list-item>
                    <a-list-item> <a-button type="primary" block>物料呼叫</a-button></a-list-item>
                    <a-list-item> <a-button type="danger" block>设备呼叫</a-button></a-list-item>
                    <a-list-item> <a-button type="primary" block>质量呼叫</a-button></a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :md="12">
                <a-card bordered title="记录">
                  <a-timeline>
                    <a-timeline-item>2015-09-01 11:11:11 【张三】【设备呼叫】<br> 发起呼叫<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:11:31 【李四】【设备呼叫】<br> 响应呼叫<br><a href="#">详情</a></a-timeline-item>
                    <a-timeline-item>2015-09-01 11:12:31 【张三】【设备呼叫】<br> 处理呼叫<br><a href="#">详情</a></a-timeline-item>
                  </a-timeline>

                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>

      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: '编码',
          dataIndex: 'name',
        },
        {
          title: '名称',
          dataIndex: 'name',
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
        }
      ],
      dataSource: [],
      conditions: {}
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.table {
  background-color: @base-bg-color;
  padding: 24px;
}
</style>